<template>
	
	<div class="inviterecord">
		<div class="template" v-show="Loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>邀请记录</div>
			<div></div>
		</header>
		
		<div class="inviterecordC">
			<div class="inviterecordC_T flex main_zdy sideAlign_center">
				<div>用户名</div>
				<div>邀请人</div>
				<div>注册时间</div>
			</div>
			<div class="flex main_zdy sideAlign_center inviterecordC_list" v-for='item in recordlist'>
				<div>{{item.userName}}</div>
				<div>{{item.inviteName}}</div>
				<div>{{item.creatTime}}</div>
			</div>
		</div>
		
	</div>
	
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				token:'',
				recordlist:[],
				index:0,
				loading:'',
				Loading:false,
				first:[],
			}
		},
		created(){
			this.token = localStorage.getItem('token');
			this.singInfo(this.index);
		},
		methods:{
			//导航退后
			retreat:function(){
				window.history.go(-1);
			},
			singInfo(index){
				this.Loading = true;
				var url = BaseUrl + 'users/inviteRecord?token=' +this.token + '&appId=wap+&length=10&start=' + this.index;
				this.$http.post(url).then(res=>{
					if(res.data.code == '10000'){
						this.Loading = false;
						this.recordlist = this.recordlist.concat(res.data.data.list);
						if(res.data.data.isMore == "none") {
							this.loading = true;
							return;
						} else if(res.data.data.isMore == "have") {
							this.loading = false;
							this.index++;
						}
					}else{
						Toast({
						message: res.data.msg,
						position: 'middle',
						duration: 3000
					})
					}
				}).catch(error=>{
					this.Loading = false;
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
				
			},
			loadMore() {
				this.loading = this.loading;
				if(this.loading == false){
					setTimeout(() => {
						this.singInfo(this.index);
						this.loading = this.loading;
					}, 100);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.inviterecord{
		width: 100%;
		height: 100%;
		background: #F4F7FA;
	}
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		border-bottom: 1px solid #dcd2d1;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	
	.inviterecordC{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0 8px 12px 0 rgba(2,2,2,0.04);
		border-radius: 0.02rem;
	}
	.inviterecordC_T{
		margin: 0 0.5rem;
		height: 0.85rem;
		border-bottom: 1px solid #E3E7EE;
	}
	.inviterecordC_T div{
		width: 33%;
		font-family: "PingFangSC-Medium";
		font-size: 0.28rem;
		color: #606266;
		letter-spacing: 0;
	}
	.inviterecordC_list{
		margin: 0 0.5rem;
		height: 0.85rem;
	}
	.inviterecordC_list div{
		width: 33%;
		font-family: 'PingFangSC-Regular';
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
	}
</style>